<template>
  <div class="activity-awards-card">
    <div class="statistics-cards">
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-line"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">全国性活动</div>
          <div class="stat-value">34,201</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-analysis"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">省市级活动</div>
          <div class="stat-value">94,201</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">
          <i class="el-icon-data-board"></i>
        </div>
        <div class="stat-content">
          <div class="stat-label">其他活动</div>
          <div class="stat-value">34,201</div>
        </div>
      </div>
    </div>

    <div class="table-section">
      <div class="table-header">
        <span class="title">参与活动明细</span>
        <span class="unit">(单位：元)</span>
        <div class="header-right">
          <el-button type="text">全部 ></el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="schoolName" label="学校名称" />
        <el-table-column prop="activityType" label="比赛/活动等级" />
        <el-table-column prop="participationDate" label="参与时间" />
        <el-table-column prop="result" label="比赛/活动名称、奖励和荣誉" />
      </el-table>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  import { getHonorData } from '@/api/statistics'

  export default {
    name: 'ActivityAwardsCard',
    data() {
      return {
        number: 0,
        chart: null,
        chartData: [],
        tableData: [{
            schoolName: '河南省黄河体院',
            activityType: '全国性',
            participationDate: '2024-11-20',
            result: 'XXX活动荣获一等奖'
          },
          {
            schoolName: '北京体育大学',
            activityType: '全国性',
            participationDate: '2024-11-23',
            result: 'XXX活动荣获一等奖'
          },
          {
            schoolName: '郑州体育大学',
            activityType: '全国性',
            participationDate: '2024-11-24',
            result: 'XXX活动荣获一等奖'
          },
          {
            schoolName: '辽宁体育大学',
            activityType: '全国性',
            participationDate: '2024-11-24',
            result: 'XXX活动荣获一等奖'
          },
          {
            schoolName: '三门峡体育中专',
            activityType: '省市级',
            participationDate: '2024-11-26',
            result: 'XXX活动荣获一等奖'
          }
        ]
      }
    },
    async created() {
      await this.drawChart()
    },
    methods: {
      async drawChart() {
        try {
          const res = await getHonorData({ year: new Date().getFullYear() })
          if (res && res.data) {
            this.number = res.data.number
            this.chartData = res.data.list
            this.$nextTick(() => {
              this.initChart()
            })
          }
        } catch (error) {
          console.error('获取荣誉数据失败:', error)
        }
      },
      initChart() {
        this.chart = echarts.init(this.$refs.chart)
        const option = {
          title: {
            text: '荣誉数据',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '荣誉数据',
              type: 'pie',
              radius: '50%',
              data: this.chartData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped>
  .activity-awards-card {
    background: #fff;
    border-radius: 8px;
    width: 100%;
  }

  .statistics-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
  }

  .stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 8px;
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #409EFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
  }

  .stat-icon i {
    font-size: 24px;
    color: #fff;
  }

  .stat-content {
    flex: 1;
  }

  .stat-label {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
  }

  .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
  }

  .table-section {
    background: #fff;
    border-radius: 8px;
  }

  .table-header {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #EBEEF5;
    margin-bottom: 16px;
  }

  .table-header .title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }

  .table-header .unit {
    font-size: 12px;
    color: #909399;
    margin-left: 8px;
  }

  .header-right {
    margin-left: auto;
  }

  :deep(.el-table) {
    font-size: 14px;
  }

  :deep(.el-table th) {
    background-color: #F5F7FA;
  }

  :deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: #F5F7FA;
  }
</style>
